<style scoped>
    .bill {
        padding: 0 20px;
    }

    .car_detail .detail .table {
        border-collapse: collapse;
        width: 100%;
        line-height: 40px;
    }

    .car_detail .detail .table th {
        background-color: #f8f8f8;
    }

    .car_detail .detail .table td,
    .detail .table th {
        border: 1px solid #eee;
        text-align: center;
    }

    .car_detail .detail .table tr td:nth-child(2) {
        text-align: left;
        padding-left: 15px;
    }

    .car_detail .detail .table input {
        height: 30px;
        line-height: 30px;
        border: 1px solid #d2d2d2;
        width: 90%;

    }

    .car_detail .mingxi .ivu-date-picker-rel:after,
    .mingxi .ivu-select:after {
        height: 30px;
    }
    th,td{
        text-align: center;
    }
</style>
<style>
    .car_detail #footer {
        height: 80px;
        line-height: 80px;
        position: fixed;
        bottom: 0;
        z-index: 100;
        text-align: center;
        background-color: #FFF;
        box-shadow: -1px -3px 2px #E3E3E3;
    }

    .car_detail .common-box-body .ivu-form-item label {
        height: 36px;
    }

    /* .car_detail .chepai{
        width:33%;
    } */

    .car_detail .chepai input {
        /* position: relative;
        top: -14px !important; */
    }

    .car_detail .chepai.ivu-form-item-content {
        position: relative;
    }

    .car_detail .chepai .checkchepai {
        border-left: 1px solid #bebebe;
        border-right: 1px solid #bebebe;
        position: absolute;
        right: 0;
        top: 0;
    }

    .car_detail .sanbao .ivu-form-item-label {
        border-right: 1px solid #bebebe;
        margin-right: 10px;
    }

    .car_detail .sanbao .ivu-checkbox-group-item {
        border: none;
        float: left;
    }

    .car_detail .sanbao .ivu-checkbox-group {
        /* border:1px solid #bebebe; */
        height: 36px;
    }

    .car_detail .sanbao .ivu-checkbox-wrapper-checked {
        border: none;
        /* padding:0 5px; */
        height: 36px;
        /* border: 1px solid #000; */
        vertical-align: middle;
    }
    .car_detail .ivu-form-item{
        margin-bottom: 18px;
    }
</style>
<template>
    <div class="car_detail">
        <product-title></product-title>
        <div class="bill common-box-body">
            <Form :model="formItem1" ref="formItem1" id="formItem1">
                <Row>
                    <i-col :md="24" :lg="8">
                        <FormItem label="保单录入时间">
                            <DatePicker type="date" v-model='formItem1.enter_date' placeholder="请选择" disabled></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="8">
                        <FormItem label="保单核保日期">
                            <DatePicker v-model='formItem1.check_date' disabled type="date" placeholder="请选择"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="8">
                        <FormItem label="业务员">
                            <i-input disabled placeholder="请输入业务员名称" v-model='formItem1.business_name'></i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="8">
                        <FormItem label="总保费">
                            <i-input placeholder="请输入总保费" v-model='formItem1.total_premium' disabled>
                            </i-input>
                        </FormItem>
                    </i-col>

                    <i-col :md="24" :lg="8">
                        <FormItem label="总标准保费">
                            <i-input disabled placeholder="请输入总标准保费" v-model='formItem1.total_standard'>
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="8">
                        <FormItem label="渠道代码">
                            <i-input disabled placeholder="请输入渠道代码" v-model='formItem1.business_source'>
                            </i-input>
                        </FormItem>
                    </i-col>
                    <i-col :md="24" :lg="8">
                        <FormItem label="渠道名称">
                            <i-input disabled placeholder="请输入渠道名称" v-model='formItem1.com_name'>
                            </i-input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row style="padding:30px 0px;">
                    <Tabs type="card" :animated="false" v-model="tab">
                        <TabPane label="车辆信息">
                            <div id="formItem2">
                                <Row>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车牌号">
                                            <i-input disabled placeholder="请输入车牌号" v-model='formItem1.car.car_code'></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                            <FormItem label="是否有上牌">
                                                    <i-input disabled v-model='formItem1.car.no_code'></i-input>
                                                <!-- <i-select :transfer="true" disabled v-model='formItem1.car.no_code'>
                                                    <Option value="0">未上牌</Option>
                                                    <Option value="1">已上牌</Option>
                                                </i-select> -->
                                            </FormItem>
                                        </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="采购价">
                                            <i-input disabled v-model='formItem1.car.purchase_price' placeholder="请输入采购价"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="实际价值">
                                            <i-input disabled v-model='formItem1.car.consult_value' placeholder="请输入实际价值"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="初登日期">
                                            <DatePicker v-model='formItem1.car.register_date' disabled type="date" placeholder="请选择"></DatePicker>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="购置日期">
                                            <DatePicker v-model='formItem1.car.purchase_date' disabled type="date" placeholder="请选择"></DatePicker>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="是否过户车">
                                            <!-- <i-input disabled v-model='formItem1.car.is_transfer' placeholder="是否过户车"></i-input> -->
                                            <i-select :transfer="true" disabled v-model='formItem1.car.is_transfer'>
                                                <Option value="0">否</Option>
                                                <Option value="1">是</Option>
                                            </i-select>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="是否按揭车">
                                            <!-- <i-input disabled v-model='formItem1.car.is_mortgage' placeholder="是否按揭车"></i-input> -->
                                            <i-select :transfer="true" disabled v-model='formItem1.car.is_mortgage'>
                                                <Option value="0">否</Option>
                                                <Option value="1">是</Option>
                                            </i-select>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="新车标志">
                                                <i-input disabled v-model='formItem1.car.new_car_sign'>
                                                    </i-input>
                                            <!-- <i-select :transfer="true" disabled v-model='formItem1.car.new_car_sign'>
                                                <Option value="旧车">旧车</Option>
                                                <Option value="新车">新车</Option>
                                            </i-select> -->
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="过户日期">
                                            <DatePicker v-model='formItem1.car.transfer_date' disabled type="date" placeholder="请选择"></DatePicker>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车辆种类">
                                            <i-input disabled v-model='formItem1.car.dept_name'>
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="验车状态">
                                            <i-input disabled v-model='formItem1.car.car_check_status'>
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车身颜色">
                                            <i-input disabled v-model='formItem1.car.car_colour'>
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="免验车原因">
                                            <i-input disabled v-model='formItem1.car.no_check_reason'>
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="号牌底色">
                                            <i-input disabled v-model='formItem1.car.background'>
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="是否外地车">
                                            <i-select :transfer="true" disabled v-model='formItem1.car.is_other_car'>
                                                <Option value="0">非新车</Option>
                                                <Option value="1">新车</Option>
                                            </i-select>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="发动机号">
                                            <i-input v-model='formItem1.car.engine' disabled placeholder="请输入发动机号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车架号">
                                            <i-input disabled v-model='formItem1.car.vin' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车型代码">
                                            <i-input disabled v-model='formItem1.car.local_model_code' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="行业车型编码">
                                            <i-input disabled v-model='formItem1.car.model_code' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="使用性持">
                                            <i-input disabled v-model='formItem1.car.category' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车辆年龄">
                                            <i-input disabled v-model='formItem1.car.car_age' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车牌号类型">
                                            <i-input disabled v-model='formItem1.car.code_type' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="能源类型">
                                            <i-input disabled v-model='formItem1.car.energy_type' placeholder="请输入车架号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="荷载质量(KG)">
                                            <i-input disabled v-model='formItem1.car.ratified_load_capacity' placeholder="请输入荷载质量"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="整备质量(KG)">
                                            <i-input disabled v-model='formItem1.car.unladen_mass' placeholder="请输入整备质量"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="牵引总质量">
                                            <i-input disabled v-model='formItem1.car.traction_mass' placeholder="请输入牵引总质量(kg)"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="厂牌型号">
                                            <i-input disabled v-model='formItem1.car.model' placeholder="请输入厂牌型号"></i-input>
                                        </FormItem>
                                    </i-col>

                                    <i-col :md="24" :lg="8">
                                        <FormItem label="座位">
                                            <i-input disabled v-model='formItem1.car.saddle' placeholder="请输入厂牌型号"></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="车辆类型">
                                            <i-input disabled v-model='formItem1.car.car_type' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="核定载客(人)">
                                            <i-input disabled v-model='formItem1.car.approved_passengers_capacity' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="排量(L)">
                                            <i-input disabled v-model='formItem1.car.displacement' placeholder="请输入排量">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="功率(KW)">
                                            <i-input disabled v-model='formItem1.car.power' placeholder="请输入功率(KW)">

                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="平均年行驶里程(km)">
                                            <i-input disabled v-model='formItem1.car.average_annual_mileage' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="行驶区域">
                                            <i-input disabled v-model='formItem1.car.free_space' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="承修方">
                                            <i-input disabled v-model='formItem1.car.server_name' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="争议解决方式">
                                            <i-input disabled v-model='formItem1.car.dispute_settlement_mechanism' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="8">
                                        <FormItem label="第一受益人">
                                            <i-input disabled v-model='formItem1.car.primary_beneficiary' placeholder="请输入">
                                            </i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane label="关系人信息">
                            <div>
                                <template>
                                    <Row style="padding:20px 0;border-bottom: 1px dotted #DDDEE1">
                                        <i-col :md="4" :lg="4" class="sanbao">
                                            <FormItem label="客户角色">
                                                <CheckboxGroup v-model='type1'>
                                                    <Checkbox disabled label="1">投保人</Checkbox>
                                                    <!-- <Checkbox disabled label="2">被保险人</Checkbox> -->
                                                    <!-- <Checkbox disabled label="3">车主</Checkbox> -->
                                                </CheckboxGroup>
                                            </FormItem>
                                        </i-col>
                                        <i-col style="display: inline;" :lg="20" :md="20">
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户姓名">
                                                    <i-input disabled v-model='formItem1.customer.name' placeholder="请输入客户姓名"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件类型">
                                                    <i-input disabled v-model='formItem1.customer.id_type' placeholder="请输入证件类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件号码">
                                                    <i-input v-model='formItem1.customer.id_number' disabled placeholder="请输入证件号码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户类型">
                                                    <i-input v-model='formItem1.customer.category' disabled placeholder="请输入客户类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="性别">
                                                    <i-input disabled v-model='formItem1.customer.sex' placeholder="请输入客户性别"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="手机号">
                                                    <i-input disabled v-model='formItem1.customer.mobile' placeholder="请输入手机号"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="联系电话">
                                                    <i-input disabled v-model='formItem1.customer.tel' placeholder="请输入联系电话"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户生日">
                                                    <i-input disabled v-model='formItem1.customer.birthday' placeholder="请输入客户生日"></i-input>
                                                </FormItem>
                                            </i-col>

                                            <i-col :md="24" :lg="8">
                                                <FormItem label="E-mail">
                                                    <i-input v-model='formItem1.customer.email' disabled placeholder="请输入邮箱"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="邮政编码">
                                                    <i-input v-model='formItem1.customer.postcode' disabled placeholder="请输入邮政编码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="地址">
                                                    <i-input v-model='formItem1.customer.address' disabled placeholder="请输入地址"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="反洗钱风险等级">
                                                    <i-input v-model='formItem1.customer.risk_level' disabled placeholder="请输入反洗钱风险等级"></i-input>
                                                </FormItem>
                                            </i-col>
                                        </i-col>

                                    </Row>
                                    <Row style="padding:20px 0;border-bottom: 1px dotted #DDDEE1">
                                        <i-col :md="4" :lg="4" class="sanbao">
                                            <FormItem label="客户角色">
                                                <CheckboxGroup v-model='type2'>
                                                    <!-- <Checkbox disabled label="1">投保人</Checkbox> -->
                                                    <Checkbox disabled label="2">被保险人</Checkbox>
                                                    <!-- <Checkbox disabled label="3">车主</Checkbox> -->
                                                </CheckboxGroup>
                                            </FormItem>
                                        </i-col>
                                        <i-col style="display: inline;" :lg="20" :md="20">
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户姓名">
                                                    <i-input disabled v-model='formItem1.ensured_person.name' placeholder="请输入客户姓名"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件类型">
                                                    <i-input disabled v-model='formItem1.ensured_person.id_type' placeholder="请输入证件类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件号码">
                                                    <i-input v-model='formItem1.ensured_person.id_number' disabled placeholder="请输入证件号码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户类型">
                                                    <i-input v-model='formItem1.ensured_person.category' disabled placeholder="请输入客户类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="性别">
                                                    <i-input disabled v-model='formItem1.ensured_person.sex' placeholder="请输入客户性别"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="手机号">
                                                    <i-input disabled v-model='formItem1.ensured_person.mobile' placeholder="请输入手机号"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="联系电话">
                                                    <i-input disabled v-model='formItem1.ensured_person.tel' placeholder="请输入联系电话"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户生日">
                                                    <i-input disabled v-model='formItem1.ensured_person.birthday' placeholder="请输入客户生日"></i-input>
                                                </FormItem>
                                            </i-col>

                                            <i-col :md="24" :lg="8">
                                                <FormItem label="E-mail">
                                                    <i-input v-model='formItem1.ensured_person.email' disabled placeholder="请输入邮箱"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="邮政编码">
                                                    <i-input v-model='formItem1.ensured_person.postcode' disabled placeholder="请输入邮政编码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="地址">
                                                    <i-input v-model='formItem1.ensured_person.address' disabled placeholder="请输入地址"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="反洗钱风险等级">
                                                    <i-input v-model='formItem1.ensured_person.risk_level' disabled placeholder="请输入反洗钱风险等级"></i-input>
                                                </FormItem>
                                            </i-col>
                                        </i-col>

                                    </Row>
                                    <Row style="padding:20px 0;border-bottom: 1px dotted #DDDEE1">
                                        <i-col :md="4" :lg="4" class="sanbao">
                                            <FormItem label="客户角色">
                                                <CheckboxGroup v-model='type3'>
                                                    <!-- <Checkbox disabled label="1">投保人</Checkbox> -->
                                                    <!-- <Checkbox disabled label="2">被保险人</Checkbox> -->
                                                    <Checkbox disabled label="3">车主</Checkbox>
                                                </CheckboxGroup>
                                            </FormItem>
                                        </i-col>
                                        <i-col style="display: inline;" :lg="20" :md="20">
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户姓名">
                                                    <i-input disabled v-model='formItem1.car.owner.name' placeholder="请输入客户姓名"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件类型">
                                                    <i-input disabled v-model='formItem1.car.owner.id_type' placeholder="请输入证件类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="证件号码">
                                                    <i-input v-model='formItem1.car.owner.id_numbe' disabled placeholder="请输入证件号码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户类型">
                                                    <i-input v-model='formItem1.car.owner.category' disabled placeholder="请输入客户类型"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="性别">
                                                    <i-input disabled v-model='formItem1.car.owner.sex' placeholder="请输入客户性别"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="手机号">
                                                    <i-input disabled v-model='formItem1.car.owner.mobile' placeholder="请输入手机号"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="联系电话">
                                                    <i-input disabled v-model='formItem1.car.owner.tel' placeholder="请输入联系电话"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="客户生日">
                                                    <i-input disabled v-model='formItem1.car.owner.birthday' placeholder="请输入客户生日"></i-input>
                                                </FormItem>
                                            </i-col>

                                            <i-col :md="24" :lg="8">
                                                <FormItem label="E-mail">
                                                    <i-input v-model='formItem1.car.owner.email' disabled placeholder="请输入邮箱"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="邮政编码">
                                                    <i-input v-model='formItem1.car.owner.postcode' disabled placeholder="请输入邮政编码"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="地址">
                                                    <i-input v-model='formItem1.car.owner.address' disabled placeholder="请输入地址"></i-input>
                                                </FormItem>
                                            </i-col>
                                            <i-col :md="24" :lg="8">
                                                <FormItem label="反洗钱风险等级">
                                                    <i-input v-model='formItem1.car.owner.risk_level' disabled placeholder="请输入反洗钱风险等级"></i-input>
                                                </FormItem>
                                            </i-col>
                                        </i-col>

                                    </Row>
                                </template>
                            </div>
                        </TabPane>
                        <TabPane label="保单明细(交强险)">
                            <div>
                                <div style="margin-bottom:15px;font-size:14px;">
                                    <Row>
                                        <i-col>
                                            交强险&emsp;&emsp;合计 :<span>{{formItem1.traffic_policy.premium}}</span>元
                                            <span></span>
                                        </i-col>
                                    </Row>
                                </div>
                                <div>
                                    <Row>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="交强险保单号">
                                                <i-input disabled v-model='formItem1.traffic_policy.policy_no' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="交强险起保日期">
                                                <DatePicker v-model='formItem1.traffic_policy.start_date' disabled type="date" placeholder="请选择"></DatePicker>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="交强险到期日期">
                                                <DatePicker disabled v-model='formItem1.traffic_policy.end_date' type="date" placeholder="请选择"></DatePicker>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="交强险投保单号">
                                                <i-input disabled v-model='formItem1.traffic_policy.proposal_no' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="交强险保单状态">
                                                <i-input disabled v-model='formItem1.traffic_policy.traffic_status' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="保险金额">
                                                <i-input disabled v-model='formItem1.traffic_policy.amount' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="标准保费">
                                                <i-input disabled v-model='formItem1.traffic_policy.standard_premium' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="实缴保费">
                                                <i-input disabled v-model='formItem1.traffic_policy.premium' placeholder="请选择"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="是否代缴车船税">
                                                <i-select :transfer="true" disabled v-model='formItem1.traffic_policy.is_vat'>
                                                    <Option value="0">否</Option>
                                                    <Option value="1">是</Option>
                                                </i-select>
                                            </FormItem>
                                        </i-col>
                                    </Row>

                                </div>
                            </div>
                            <div>
                                <div class="shangjiao">
                                    <p style="margin-bottom:10px;">
                                        缴纳车船税
                                    </p>
                                </div>
                                <div class="shangjiaoCont">
                                    <!-- <Row style="margin-bottom: 10px;">
                                        <i-col :md="24" :lg="24">
                                            <RadioGroup>
                                                <Radio disabled label="1">正常缴纳</Radio>
                                                <Radio disabled label="2">已完税</Radio>
                                                <Radio disabled label="3">免税</Radio>
                                                <Radio disabled label="4">减税</Radio>
                                                <Radio disabled label="5">拒缴</Radio>
                                            </RadioGroup>
                                        </i-col>
                                    </Row> -->
                                    <Row>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="纳税人名称">
                                                <i-input v-model="formItem1.traffic_policy.vat.vat_name" disabled placeholder="请输入纳税人名称"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="纳税人证件类型">
                                                <i-input v-model="formItem1.traffic_policy.vat.vat_id_type" disabled placeholder="请输入"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="纳税人证件号">
                                                <i-input disabled placeholder="请输入纳税人证件号" v-model="formItem1.traffic_policy.vat.vat_id_no"></i-input>
                                            </FormItem>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="纳税人识别号">
                                                <i-input disabled v-model="formItem1.traffic_policy.vat.vat_no" placeholder="请输入纳税人识别号"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="本年应缴税款(元)">
                                                <i-input v-model="formItem1.traffic_policy.vat.this_year_vat" disabled placeholder="请输入本年应缴税款(元)"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="往年补缴">
                                                <i-input disabled placeholder="请输入往年补缴" v-model="formItem1.traffic_policy.vat.former_year_vat"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="滞纳金">
                                                <i-input disabled v-model="formItem1.traffic_policy.vat.overdue_fine" placeholder="请输入滞纳金"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="合计应交金额">
                                                <i-input disabled placeholder="请输入合计应交金额" v-model="formItem1.traffic_policy.vat.total"></i-input>
                                            </FormItem>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col :md="24" :lg="24">
                                            <FormItem>
                                                <div >
                                                    交强险特别约定
                                                </div>
                                                <p style="color:#69B4f6;">{{formItem1.traffic_policy.traffic_special_agreement}}</p>
                                            </FormItem>
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col :md="24" :lg="24">
                                            <FormItem>
                                                <div>
                                                    交强险核保意见
                                                </div>
                                                <p style="color:#69B4f6;">{{formItem1.traffic_policy.traffic_underwriting_advice}}</p>
                                            </FormItem>
                                        </i-col>
                                    </Row>
                                </div>

                            </div>
                        </TabPane>
                        <TabPane label="保单明细(商业险)">
                            <div>
                                <div style="margin-bottom:15px;font-size:14px;">
                                    <Row>
                                        <i-col>
                                            商业险&emsp;&emsp;合计 :<span>{{premiums}}</span>元
                                            <span></span>
                                        </i-col>
                                    </Row>
                                </div>
                                <div class="shangjiaoCont">
                                    <Row>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="商业险保单号">
                                                <i-input v-model='formItem1.commercial_policy.commercial_policy_no' disabled placeholder="请输入商业险保单号"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="商业险起保日期">
                                                <DatePicker v-model='formItem1.commercial_policy.start_date' disabled type="date" placeholder="请选择"></DatePicker>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="商业险到期日期">
                                                <DatePicker v-model='formItem1.commercial_policy.end_date' disabled type="date" placeholder="请选择"></DatePicker>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                            <FormItem label="商业险投保单号">
                                                <i-input v-model='formItem1.commercial_policy.commercial_proposal_no' disabled placeholder="请输入商业险投保单号"></i-input>
                                            </FormItem>
                                        </i-col>
                                        <i-col :md="24" :lg="8">
                                                <FormItem label="商业险保单状态">
                                                    <i-input v-model='formItem1.commercial_policy.commercial_status' disabled placeholder="请输入"></i-input>
                                                </FormItem>
                                            </i-col>
                                    </Row>
                                </div>
                            </div>
                            <div class="detail">
                                <Row  style="margin-bottom: 10px;font-size:14px;">
                                    <i-col :md="12" :lg="12" style="padding-top: 5px;">
                                        <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                        主险条约
                                    </i-col>
                                    <!-- <i-col :md="12" :lg="{span:1,offset:10}">
                                        <i-button type="primary">
                                            <Icon type="arrow-up-b"></Icon>
                                            折叠
                                        </i-button>
                                    </i-col> -->
                                </Row>
                                <Row>
                                    <table class="table xianzhong">
                                        <thead>
                                            <tr>
                                                <th>险别名称</th>
                                                <th>金额</th>
                                                <th>是否不计免赔</th>
                                                <th>绝对免费额（元）</th>
                                                <th>标准保费</th>
                                                <th>实缴保费</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template v-for="(item,index) in formItem1.commercial_policy.coverage">
                                                <tr>
                                                    <td>{{item.kind_name}}</td>
                                                    <td>{{item.amount}}元</td>
                                                    <td>{{item.is_deductible}}</td>
                                                    <td>{{item.is_deductible_money}}</td>
                                                    <td>{{item.standard_premium}}</td>
                                                    <td>{{item.premium}}</td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </Row>
                            </div>
                            <!-- <div class="detail">
                                <Row class="head">
                                    <i-col :md="12" :lg="12" style="padding-top: 5px;">
                                        <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                        不计免赔险
                                    </i-col>
                                    <i-col :md="12" :lg="{span:1,offset:10}">
                                        <i-button type="primary">
                                            <Icon type="arrow-up-b"></Icon>
                                            折叠
                                        </i-button>
                                    </i-col>
                                </Row>
                                <Row>
                                    <table class="table xianzhong">
                                        <thead>
                                            <tr>
                                                <th>项目</th>
                                                <th>保额/限额</th>
                                                <th>基准保费</th>
                                                <th>保费</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </Row>
                            </div>
                            <div class="detail">
                                <Row class="head">
                                    <i-col :md="12" :lg="12" style="padding-top: 5px;">
                                        <Icon type="ios-list-outline" style="font-size:16px;"></Icon>
                                        浮动原因
                                    </i-col>
                                </Row>
                                <Row>
                                    <table class="table xianzhong">
                                        <thead>
                                            <tr>
                                                <th>浮动原因</th>
                                                <th>系数（%）</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template>
                                                <tr>
                                                    <td></td>
                                                    <td style="text-align: center"></td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </Row>
                            </div> -->
                            <Row>
                                    <i-col :md="24" :lg="24">
                                        <FormItem>
                                            <div>
                                                商业险特别约定
                                            </div>
                                            <p style="color:#69B4f6;">{{formItem1.commercial_policy.commercial_special_agreement}}</p>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col :md="24" :lg="24">
                                        <FormItem>
                                            <div>
                                                    商业险核保意见
                                            </div>
                                            <p style="color:#69B4f6;">{{formItem1.commercial_policy.commercial_underwriting_advice}}</p>
                                        </FormItem>
                                    </i-col>
                                </Row>
                        </TabPane>
                    </Tabs>
                </Row>
                <!-- <Row>
                    <i-col span="24" style="margin:30px 0;text-align: center">
                        <i-button type="primary" shape="circle" style="margin-right:20px;width:200px;" @click="submit">
                            <Icon type="checkmark-circled"></Icon>
                            &emsp;提交保单信息
                        </i-button>
                        <i-button  shape="circle" style="width:120px;background-color: #77B4F5;color:#FFF;" @click="reset">
                            <Icon type="refresh"></Icon>
                            &emsp;重置
                        </i-button>
                    </i-col>
                </Row> -->
            </Form>
        </div>
        <Row >
            <i-col span="24" id="footer">
                <!-- <i-button type="primary" shape="circle" :disabled='tableaction' style="width:200px;position:relative;left:-10%;" @click="submit('formItem1','formItem2','formItem3')">
                    <Icon type="checkmark-circled"></Icon>
                    &emsp;提交保单信息
                </i-button> -->
                <i-button shape="circle" style="width:120px;background-color: #77B4F5;color:#FFF;position:relative;left:-9%;margin-top:20px;"
                            @click="back">
                    <Icon type="refresh"></Icon>
                    &emsp;返回
                </i-button>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        car_detail
    } from "../../api/newcar.js";
    export default {
        data() {
            return {
                premiums:0,//商业险合计
                tab: '',
                tabs: '',
                seen1: false,
                seen2: false,
                type1: ['1'],
                type2: ['2'],
                type3: ['3'],
                formItem1: {

                    customer: { //投保人信息

                        name: "", //客户姓名
                        sex: "", //性别，1男2女
                        id_type: '', //证件类型，身份证，军官证，出生证，台胞证，护照，港澳通行证，组织代码证。默认身份证
                        id_number: "", //证件号
                        category: "", //客户类型，个人，法人
                        mobile: "", //手机号
                        tel: "", //联系电话
                        birthday: "", //客户生日
                        risk_level: "", //反洗钱风险等级,低级，中级，高级
                        address: "", //详细地址
                        postcode: "", //邮政编码
                        email: "", //邮箱
                    },
                    ensured_person: { //投保人信息
                        name: "", //客户姓名
                        sex: "", //性别，1男2女
                        id_type: '', //证件类型，身份证，军官证，出生证，台胞证，护照，港澳通行证，组织代码证。默认身份证
                        id_number: "", //证件号
                        category: "", //客户类型，个人，法人
                        mobile: "", //手机号
                        tel: "", //联系电话
                        birthday: "", //客户生日
                        risk_level: "", //反洗钱风险等级,低级，中级，高级
                        address: "", //详细地址
                        postcode: "", //邮政编码
                        email: "", //邮箱
                    },

                    car: {
                        owner: { //车主信息。默认为被保人信息
                            name: "", //姓名
                            id_type: "", //证件类型,身份证，军官证。。。。
                            id_numbe: "" // 身份证号
                        },
                        car_code: "", //车牌号
                        no_code: "", //  标识未上车牌号 1：已上，0：未上
                        background: "", // 号牌底色/车牌底色
                        code_type: "", //   车牌号类型，小型汽车号牌
                        vin: "", // 车架号LZWACAGA2B4153519
                        engine: "", // 发动机号码，B02060024
                        local_model_code: "", // 车型代码 (DFCQBD0038)
                        model_code: "", // 行业车型编码 （BDFIXLUC0028）
                        model: "", // 厂牌型号，东风DXK6440AF7F多用途乘用车
                        car_type: "", // 车辆类型 ，客车
                        category: "", // 使用性持, 家庭自用
                        energy_type: "", //能源类型,燃油
                        car_colour: "", // 车身颜色
                        dept_name: "", //国产/进口,合资
                        car_age: "", //  车龄/已使用年限
                        purchase_date: "", // 购置日期
                        register_date: "", // 初登日期
                        is_mortgage: "", //是否按揭车：1按揭,0非按揭
                        new_car_sign: "", // 新车标志，1新，0非
                        purchase_price: "", // 新车购置价，（元）
                        consult_value: "", // 参考价值/实际价值（元）
                        is_transfer: "", // 过户标识：1过户，0 未过户
                        transfer_date: "", // 过户日期
                        car_check_status: "", // 验车状态 ，已验、免验
                        no_check_reason: "", // 免验车原因
                        saddle: "", //车座数
                        approved_passengers_capacity: "", // 核定载客，(人)
                        unladen_mass: "", //空载质量、整备质量（kg）
                        traction_mass: "", //牵引总质量(kg)
                        ratified_load_capacity: "", //核定载质量(kg)
                        power: "", //功率（KW），
                        displacement: "", // 排量（L）
                        average_annual_mileage: "", // 平均年行驶里程(km)
                        is_other_car: "", // 外地车标志，1，是，0否
                        free_space: "", // 行驶区域，中华人民共和国境内（不含港、澳、台地区），
                        server_name: "", // 承修方，其他
                        dispute_settlement_mechanism: "", // 争议解决方式，诉讼
                        primary_beneficiary: "", //第一受益人，默认为被保人
                    },
                    traffic_policy: {
                        start_date: "", //交强险起保日期
                        end_date: "", //交强险到期日期
                        policy_no: "", //交强险保单号
                        proposal_no: "", //交强险投保单号
                        traffic_status: "", // 交强险保单状态
                        amount: "", //保险金额，责任限额
                        standard_premium: "", //标准保费
                        premium: "", //实缴保费
                        is_vat: "", //是否代缴车船税，1是，0否，默认为是
                        vat: {
                            vat_name: "", //纳税人名称，默认为投保人信息
                            vat_id_type: "", //纳税人证件类型
                            vat_id_no: "", //纳税人证件号
                            vat_no: "", //纳税人识别号，U41222000007-01
                            this_year_vat: "", //当年应缴金额（元）
                            former_year_vat: "", //往年补交金额（元）
                            overdue_fine: "", //滞纳金（元）
                            total: "", //合计
                        },
                        special_agreement: "", //交强险特别约定
                        underwriting_advice: "", //交强险核保意见
                    },
                    commercial_policy: {
                        start_date: "", //商业险起保日期
                        end_date: "", //商业险到期日期
                        commercial_policy_no: "", //商业险保单号
                        commercial_proposal_no: "", //商业险投保单号
                        commercial_status: "", // 商业险保单状态
                        coverage: [{ //保险范围
                            kind_name: "", //险种名称
                            amount: "", //金额，
                            is_deductible: "", //是否不计免赔，1 是，0 否
                            is_deductible_money: "", //绝对免费额（元）
                            standard_premium: "", //标准保费
                            premium: "", //实缴保费
                        }],

                        commercial_special_agreement: "", //商业险特别约定
                        commercial_underwriting_advice: "", //商业险核保意见

                    }
                }
            }
        },
        components: {
            productTitle
        },
        created() {
            this.get_detail();
        },
        methods: {
            //   点击返回  回退列表页面
          back() {
            this.$router.push({
                name:'car_search'
              })
          },
            reset(name) {
                //                this.$refs[name].resetFields();
                alert('暂未启用');

            },
            submit() {
                this.$router.push({
                    name: 'bill_search'
                });
            },
            tabClick() {
                //                alert(this.tab);
            },
            get_detail() {
                let params = {
                    id: this.$route.params.id,
                }
                console.log(params, "...")
                new Promise((rev, rej) => {
                    car_detail(params).then(res => {
                        console.log(res.data, "res.data.....")
                        this.formItem1 = res.data.data.data;
                       
                        for(var i in this.formItem1.commercial_policy.coverage){
                            console.log(this.formItem1.commercial_policy.coverage[i].premium)
                            this.premiums +=  this.formItem1.commercial_policy.coverage[i].premium
                        }   
                        console.log(this.premiums)
                        // 对被保险人的缺失判断
                        // console.log(this.formItem1.customer_the_insured.coustomer_role,"111111")
                        // if(this.formItem1.customer_the_insured.coustomer_role!=""&&this.formItem1.customer_the_insured.coustomer_role!=null){
                        //     this.seen1=true;
                        // }
                        // 对车主的判断v-if
                        // console.log(this.formItem1.customer_car_owner.coustomer_role,"333333333")
                        // if(this.formItem1.customer_car_owner.coustomer_role!=""&&this.formItem1.customer_car_owner.coustomer_role!=null){
                        //     this.seen2=true;
                        // }
                    })
                })
            }
        }
    }
</script>